<template>
	<view class="image-box">
		<u--image class="mr-1 mb-1" @tap="previewImg(idx)" v-for="(img, idx) in images" :key="img" :src="img" width="152rpx" height="152rpx"></u--image>
	</view>
</template>

<script>
	export default {
		name:"bg-images",
		props:["imgList", "imgStr"],
		mounted() {
			this.getImages()
		},
		data() {
			return {
				images:[]
			};
		},
		methods:{
			getImages(){
				this.images = []
				this.getImagesByStr()
				this.getImagesByList()
			},
			getImagesByStr(){
				if(this.imgStr){
					let imgs = this.imgStr.split(',')
					for(let img of imgs){
						this.images.push(this.getImgUrl(img))
					}
				}
			},
			getImagesByList(){
				if(this.imgList&&this.imgList.length>0){
					for(let img of this.imgList){
						this.images.push(this.getImgUrl(img))
					}
				}
			},
			getImgUrl(fileName){
				if(fileName.startsWith('http')){
					return fileName
				}
				return `${getApp().globalData.config.baseUrl}${getApp().globalData.config.ossUrl}?objectName=${fileName}`
			},
			previewImg(idx){
				uni.previewImage({
					current:idx,
					urls: this.imgList,
				});
			}
		},
		watch:{
			imgStr:function(newVal, oldVal){
				this.getImages()
			},
			imgList:function(newVal, oldVal){
				this.getImages()
			},
		},
		
	}
</script>

<style scoped>
.image-box {
	max-width: 680rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
</style>